<template>
  <a-card class="c__my_tab_card" :tab-list="tabs" :active-tab-key="modelValue" @tabChange="handleChange">
    <component v-if="currentComponent" v-bind="currentProps" :is="currentComponent"></component>
  </a-card>
</template>
<script lang="ts" setup>
import { ref, shallowRef, watch, watchEffect } from "vue";

interface ITab {
  key: string;
  tab: string;
  props?: { [prop: string]: any };
  comp?: Promise<{ default: any }>;
}

const modelValue = defineModel({
  default: "",
});

const props = defineProps({
  tabs: {
    default: () => [] as ITab[],
  },
});

const currentComponent = shallowRef();
const currentProps = ref<Pick<ITab, "props">>({});

const handleChange = (value: string) => {
  modelValue.value = value;
};
const getComponent = async () => {
  const tab = props.tabs?.find(({ key }) => key === modelValue.value);
  const promiseComponent = tab?.comp;
  if (promiseComponent) {
    const comp = await promiseComponent;
    currentComponent.value = comp.default;
    currentProps.value = tab?.props ?? {};
  }
};

watchEffect(getComponent);

const foundTab = props.tabs.find(({ key }) => key === modelValue.value);
if (!foundTab) {
  modelValue.value = props.tabs?.[0].key;
}
</script>
<style lang="less" scoped>
.c__my_tab_card {
  &:deep(> .ant-card-body) {
    padding: 0;

    & > .c__my_tab_card {
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
  }
}
</style>
